import React from 'react';
import { connect } from 'dva/index';
import { Form, Table, Tabs } from 'antd';

const { TabPane } = Tabs;

const WordOrderInfo = Form.create()(
  class CreateForm extends React.Component {
    // eslint-disable-next-line no-useless-constructor
    constructor(props: any) {
      super(props);
    }

    checkOrderSupplementInfo = () => {}

    render() {
      // @ts-ignore
      const { getFieldDecorator } = this.props.form

      // 物流工作单
      const logisticsColumns = [
        { title: '服务单号', dataIndex: 'serviceNo', key: 'serviceNo  ' },
        { title: '物流工作单号', dataIndex: 'workNo', key: 'workNo' },
        { title: '服务类型', dataIndex: 'type', key: 'type' },
        { title: '商品名', dataIndex: 'goodsName', key: 'goodsName' },
        { title: '客户名称', dataIndex: 'customerName', key: 'customerName' },
        { title: '起始港', dataIndex: 'loadingPort', key: 'loadingPort' },
        { title: '目的港', dataIndex: 'destinationPort', key: 'destinationPort' },
        { title: '状态',
          dataIndex: 'status',
          key: 'status',
          render: (text:any, record:any) => <span style={{ color: 'red' }}>{text}</span>,
        },
        { title: '总金额', dataIndex: 'total', key: 'total' },
        { title: '跟单员', dataIndex: 'gdUser', key: 'gdUser' },
        // { title: '附加费',
        //   // eslint-disable-next-line @typescript-eslint/no-unused-vars
        //   render: (record: any) => {
        //     const localFeeDetailLink = <a href="#">本地费用</a>
        //     return <span>{localFeeDetailLink}</span>
        //   },
        // },
        {
          title: '操作',
          // eslint-disable-next-line @typescript-eslint/no-unused-vars
          render: (record: any) => <a href="#">详情</a>,
        },
      ];

      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      const logisticsData = [
        {
          key: '1',
          id: 1,
          serviceNo: 'zbt26266',
          workNo: '156156',
          type: '空运',
          goodsName: '空运快递',
          customerName: '林科技',
          loadingPort: '广州-黄埔',
          destinationPort: '纳扎尔别克',
          so: 'so15616',
          cntrNo: '1151',
          total: '2500CNY',
          status: '补料中',
          creatTime: '2019-01-01',
          gdUser: '刘亦菲',

        },
      ];

      // 拖车工作单
      const trailerColumns = [
        { title: '服务单号', dataIndex: 'serviceNo', key: 'serviceNo  ' },
        { title: '拖车工作单号', dataIndex: 'workNo', key: 'workNo' },
        { title: '服务类型', dataIndex: 'type', key: 'type' },
        { title: '商品名', dataIndex: 'goodsName', key: 'goodsName' },
        { title: '客户名称', dataIndex: 'customerName', key: 'customerName' },
        { title: '起始港', dataIndex: 'loadingPort', key: 'loadingPort' },
        { title: '状态',
          dataIndex: 'status',
          key: 'status',
          render: (text:any, record:any) => <span style={{ color: 'red' }}>{text}</span>,
        },
        { title: '总金额', dataIndex: 'total', key: 'total' },
        { title: '跟单员', dataIndex: 'gdUser', key: 'gdUser' },
        {
          title: '操作',
          // eslint-disable-next-line @typescript-eslint/no-unused-vars
          render: (record: any) => <a href="#">详情</a>,
        },
      ];

      const trailerData = [
          {
            key: '1',
            id: 2,
            serviceNo: 'zbt51591',
            workNo: '61455',
            type: '整柜',
            goodsName: '拖车',
            customerName: '林科技',
            loadingPort: '广州-黄埔',
            destinationPort: '丹佛',
            raiseCabinetAddress: '广州海珠区江海街道',
            total: '7500CNY',
            status: '已完成',
            creator: '刘曾荣',
            creatTime: '2019-01-01',
            gdUser: '刘亦菲',
          },
    ];

      // 报关工作单
      const declareColumns = [
        { title: '服务单号', dataIndex: 'serviceNo', key: 'serviceNo  ' },
        { title: '报关工作单号', dataIndex: 'wordno', key: 'wordno' },
        { title: '商品名', dataIndex: 'goodsName', key: 'goodsName' },
        { title: '客户名称', dataIndex: 'cusName', key: 'cusName' },
        { title: '出货港口', dataIndex: 'loadingPort', key: 'loadingPort' },
        { title: '状态',
          dataIndex: 'status',
          key: 'status',
          render: (text:any, record:any) => <span style={{ color: 'red' }}>{text}</span>,
        },
        { title: '总金额', dataIndex: 'total', key: 'total' },
        { title: '跟单员', dataIndex: 'gdUser', key: 'gdUser' },
        {
          title: '操作',
          // eslint-disable-next-line @typescript-eslint/no-unused-vars
          render: (record: any) => <a href="#">详情</a>,
        },
      ];

      const declareData = [
        {
          key: '1',
          id: 1,
          serviceNo: 'zbt51591',
          workNo: 'B61455',
          goodsName: '报关',
          customerName: '林科技',
          loadingPort: '广州-黄埔',
          total: '850CNY',
          status: '报关中',
          creator: '刘曾荣',
          creatTime: '2019-01-01',
          gdUser: '刘亦菲',
          updateTime: '2019-01-01',
        },
      ];
      // 保险工作单
      const insuranceColumns = [
        { title: '服务单号', dataIndex: 'serviceNo', key: 'serviceNo  ' },
        { title: '保险工作单号', dataIndex: 'workNo', key: 'workNo' },
        { title: '保险种类', dataIndex: 'type', key: 'type' },
        { title: '客户名称', dataIndex: 'insured', key: 'insured' },
        { title: '保险金额', dataIndex: 'insuredAmount', key: 'insuredAmount' },
        { title: '保险费', dataIndex: 'insuranceCharge', key: 'insuranceCharge' },
        { title: '联系人', dataIndex: 'contactor', key: 'contactor' },
        { title: '手机号码', dataIndex: 'mobile', key: 'mobile' },
        { title: '状态',
          dataIndex: 'status',
          key: 'status',
          render: (text:any, record:any) => <span style={{ color: 'red' }}>{text}</span>,
        },
        { title: '跟单员', dataIndex: 'gdUser', key: 'gdUser' },
        {
          title: '操作',
          // eslint-disable-next-line @typescript-eslint/no-unused-vars
          render: (record: any) => <a href="#">详情</a>,
        },
      ];


      const insuranceData = [
        {
          key: '1',
          id: 1,
          serviceNo: 'zbt51591',
          workNo: 'B61455',
          type: '货运险',
          insured: '刘一鸣',
          insuredAmount: '985742CNY',
          insuranceCharge: '948CNY',
          contactor: '刘曾荣',
          email: 'xx@qq.com',
          mobile: '15521348845',
          status: '投保中',
          gdUser: '刘曾荣',
          creatTime: '2019-09-20',
          updator: '刘亦菲',
        },
      ];


      // 增值工作单
      const valueAddedColumns = [
        { title: '服务单号', dataIndex: 'serviceNo', key: 'serviceNo  ' },
        { title: '增值工作单号', dataIndex: 'workNo', key: 'workNo' },
        { title: '客户名称', dataIndex: 'companyName', key: 'companyName' },
        { title: '手机号码', dataIndex: 'mobile', key: 'mobile' },
        { title: '总金额', dataIndex: 'total', key: 'total' },
        { title: '状态',
          dataIndex: 'status',
          key: 'status',
          render: (text:any, record:any) => <span style={{ color: 'red' }}>{text}</span>,
        },
        { title: '跟单员', dataIndex: 'gdUser', key: 'gdUser' },
        {
          title: '操作',
          // eslint-disable-next-line @typescript-eslint/no-unused-vars
          render: (record: any) => <a href="#">详情</a>,
        },
      ];

      const valueAddedData = [
        {
          key: '1',
          id: 1,
          serviceNo: 'zbt51591',
          workNo: 'B61455',
          type: '产地证',
          companyName: '广州市联邦有限公司',
          mobile: '18688858151',
          email: 'email@163.com',
          total: '1564CNY',
          status: '处理中',
          creator: '刘曾荣',
          creatTime: '2019-06-01',
          gdUser: '刘亦菲',
        },
        {
          key: '2',
          id: 2,
          serviceNo: 'zbt51591',
          workNo: 'B61455',
          type: '商检',
          companyName: '广州市联邦有限公司',
          mobile: '18688858151',
          email: 'email@163.com',
          total: '864CNY',
          status: '处理中',
          creator: '刘曾荣',
          creatTime: '2019-06-05',
          gdUser: '刘亦菲',
        },
        {
          key: '3',
          id: 3,
          serviceNo: 'zbt51591',
          workNo: 'B61455',
          type: '仓库内装',
          companyName: '广州市联邦有限公司',
          mobile: '18688858151',
          email: 'email@163.com',
          total: '864CNY',
          status: '已完成',
          creator: '刘曾荣',
          creatTime: '2019-06-08',
          gdUser: '刘亦菲',
        },
      ];

      // @ts-ignore
      const logisticsTable = <Table loading={this.props.loading} rowKey="id" dataSource = {logisticsData}columns={logisticsColumns} bordered size="middle"/>;

      // @ts-ignore
      const trailerTable = <Table loading={this.props.loading} rowKey="id" dataSource ={trailerData} columns={trailerColumns} bordered size="middle"/>;

      // @ts-ignore
      const declareTable = <Table loading={this.props.loading} rowKey="id" dataSource = {declareData} columns={declareColumns} bordered size="middle"/>;

      // @ts-ignore
      const insuranceTable = <Table loading={this.props.loading} rowKey="id" dataSource = {insuranceData} columns={insuranceColumns} bordered size="middle"/>;

      // @ts-ignore
      const valueAddedTable = <Table loading={this.props.loading} rowKey="id" dataSource = {valueAddedData} columns={valueAddedColumns} bordered size="middle"/>;


      return (
        <div>
          <Tabs tabPosition="top">
            <TabPane tab="物流工作单" key="1">
              {logisticsTable}
            </TabPane>
          </Tabs>
          <Tabs tabPosition="top">
            <TabPane tab="拖车工作单" key="1">
              {trailerTable}
            </TabPane>
          </Tabs>

          <Tabs tabPosition="top">
            <TabPane tab="报关工作单" key="1">
              {declareTable}
            </TabPane>
          </Tabs>

          <Tabs tabPosition="top">
            <TabPane tab="保险工作单" key="1">
              {insuranceTable}
            </TabPane>
          </Tabs>

          <Tabs tabPosition="top">
            <TabPane tab="增值工作单" key="2">
              {valueAddedTable}
            </TabPane>
          </Tabs>
        </div>
      )
    }
  })

function mapStateToProps(state: any) {
    return {
      loading: state.loading.models.order, order: state.order,
    };
}

export default connect(mapStateToProps)(WordOrderInfo);
